/*
 * Copyright (c) 2019-present, Jhuix (Hui Jin) <jhuix0117@gmail.com>. All rights reserved.
 * Use of this source code is governed by a MIT license that can be found in the LICENSE file.
 */
.imarks {
  .imark-container {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid #eee;
    border-radius: 0.25rem;

    &.aftertriangle {
      margin-bottom: 2rem;
    }

    &.aftertriangle::after {
      content: '\00a0';
      width: 0;
      height: 0;
      display: block;
      border-style: solid;
      border-width: 15px;
      border-color: #5bc0de transparent transparent transparent;
      position: absolute;
      z-index: -1;
      bottom: -30px;
    }

    &.beforetriangle {
      margin-top: 2rem;
    }

    &.beforetriangle::before {
      content: '\00a0';
      width: 0;
      height: 0;
      display: block;
      border-style: solid;
      border-width: 15px;
      border-color: transparent transparent #5bc0de transparent;
      position: absolute;
      z-index: -1;
      top: -30px;
    }

    &.note {
      border-left-width: 0.5rem;
      border-right-width: 0.5rem;

      &.tip {
        border-color: #2b85e4;
        &.aftertriangle::after {
          border-color: #2b85e4 transparent transparent transparent;
        }
        &.beforetriangle::before {
          border-color: transparent transparent #2b85e4 transparent;
        }
      }
      &.info {
        border-color: #2979ff;
        &.aftertriangle::after {
          border-color: #2979ff transparent transparent transparent;
        }
        &.beforetriangle::before {
          border-color: transparent transparent #2979ff transparent;
        }
      }
      &.warning {
        border-color: #f29100;
        &.aftertriangle::after {
          border-color: #f29100 transparent transparent transparent;
        }
        &.beforetriangle::before {
          border-color: transparent transparent #f29100 transparent;
        }
      }
      &.error {
        border-color: #dd6161;
        &.aftertriangle::after {
          border-color: #dd6161 transparent transparent transparent;
        }
        &.beforetriangle::before {
          border-color: transparent transparent #dd6161 transparent;
        }
      }
      &.success {
        border-color: #18b566;
        &.aftertriangle::after {
          border-color: #18b566 transparent transparent transparent;
        }
        &.beforetriangle::before {
          border-color: transparent transparent #18b566 transparent;
        }
      }
    }

    &.alert {
      color: snow;
      border: 1px solid transparent;
      transition: opacity 0.2s;

      &.tip {
        background-color: #357ebd;
        &.aftertriangle::after {
          border-color: #357ebd transparent transparent transparent;
        }
        &.beforetriangle::before {
          border-color: transparent transparent #357ebd transparent;
        }
      }
      &.info {
        background-color: rgb(36, 107, 251);
        &.aftertriangle::after {
          border-color: rgb(36, 107, 251) transparent transparent transparent;
        }
        &.beforetriangle::before {
          border-color: transparent transparent rgb(36, 107, 251) transparent;
        }
      }
      &.warning {
        background-color: #f0ad4e;
        &.aftertriangle::after {
          border-color: #f0ad4e transparent transparent transparent;
        }
        &.beforetriangle::before {
          border-color: transparent transparent #f0ad4e transparent;
        }
      }
      &.error {
        background-color: #d9534f;
        &.aftertriangle::after {
          border-color: #d9534f transparent transparent transparent;
        }
        &.beforetriangle::before {
          border-color: transparent transparent #d9534f transparent;
        }
      }
      &.success {
        background-color: #67c23a;
        &.aftertriangle::after {
          border-color: #67c23a transparent transparent transparent;
        }
        &.beforetriangle::before {
          border-color: transparent transparent #67c23a transparent;
        }
      }
    }
  }

  .container-title,
  .media-title {
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.2;
  }
}
